<template>
	<view>
		<view class="padding">
			当前系统语言: {{$t('locale.auto')}}
		</view>
		<radio-group class="block" @change="RadioChange">
			<!-- <view class="cu-form-group">
				<view class="title">跟随系统</view>
				<radio :class="langue=='default'?'checked brown':''" :checked="langue=='default'?true:false"
					value="default"></radio>
			</view> -->
			<view class="cu-form-group page-bg-dark">
				<view class="title flex align-center text-black">
					<image class="ensign-img"
						src="https://img2.baidu.com/it/u=2120119438,2495774895&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1670605200&t=d362b9a02f102a3f63c196a6feb268dc"
						mode=""></image>
					<text class="margin-left-sm">中文</text>
				</view>
				<radio :class="langue=='zh-Hans'?'checked brown':''" :checked="langue=='zh-Hans'?true:false"
					value="zh-Hans"></radio>
			</view>
			<view class="cu-form-group page-bg-dark">
				<view class="title flex align-center text-black">
					<image class="ensign-img"
						src="https://img2.baidu.com/it/u=2120119438,2495774895&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1670605200&t=d362b9a02f102a3f63c196a6feb268dc"
						mode=""></image>
					<text class="margin-left-sm">English</text>
				</view>
				<radio :class="langue=='en'?'checked brown':''" :checked="langue=='en'?true:false" value="en"></radio>
			</view>
		</radio-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				language: this.$i18n.locale,
				langue: 'default',
			};
		},
		components: {

		},
		onLoad() {
			console.log('当前语言', this.language);
			this.langue = this.$i18n.locale
		},
		onShow() {
			// 修改 导航栏 保存按钮
			// #ifdef APP-PLUS
			const webView = this.$scope.$getAppWebview()
			webView.setTitleNViewButtonStyle(0, {
				text: this.$t('button.save')
			});
			// #endif
			// #ifdef H5
			setTimeout(() => {
				document.getElementsByClassName('uni-btn-icon')[1].innerText = this.$t('button.save')
			}, 100)
			// #endif
		},
		methods: {
			RadioChange(e) {
				this.langue = e.detail.value
			},
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap() {
			//是否 设置当前语言 菜单
			this.$operate.showModal({
				title: this.$t('toast.language-change-confirm'),
				confirmText: this.$t('button.confirm'), // '确定'
				cancelText: this.$t('button.cancel'), //取消
			}).then((res) => {
				uni.setLocale(this.langue);
				// #ifdef H5
				this.$i18n.locale = this.langue;
				// 修改 导航栏 保存按钮
				document.getElementsByClassName('uni-btn-icon')[1].innerText = this.$t('button.save')
				//修改完成 跳转首页
				setTimeout(() => {
					console.log('修改完成 跳转首页');
				}, 500)
				// #endif
			})
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #FFF;
	}
</style>
<style lang="scss" scoped>
	.ensign-img {
		width: 50rpx;
		height: 50rpx;
	}
</style>
